import api from "@/api/blog/blog";
import { Table, Tag, Popconfirm, message, Spin } from "antd";
import { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { getOptNameType, getNameFromTagArr } from "@/utils/dict";
import { getRole } from "@/utils/localStorage"
import { RoleButton, RoleLink } from "@/components/RoleButton"
export default function Index() {
    const history = useHistory();
    const [dt, setdt] = useState([]);
    const [loading, setLoading] = useState(false);
    const [current, setCurrent] = useState(1)
    const [pagesize, setPagesize] = useState(10)

    useEffect(() => {
        getlist();
    }, []);
    const navTo = (_id, type = "edit") => {
        history.push({ pathname: `/blog/mdEdit/${_id}/${type}` });
    };
    const remove = async (_id) => {
        const res = await api.remove({ _id });
        await getlist();
        message.success(res.msg);
    };
    const getlist = async () => {
        setLoading(true);
        api.getlist()
            .then((res) => {
                setdt(res.data);
                setLoading(false);
            })
            .catch(() => {
                setLoading(false);
            });
    };
    const columns = [
        {
            title: "标题",
            dataIndex: "title",
            key: "title",
        },
        {
            title: "创建时间",
            dataIndex: "createTime",
            key: "createTime",
        },
        {
            title: "标签",
            dataIndex: "tag",
            key: "tag",
            render: (_) => {
                let arr = getNameFromTagArr("blog_tag", _)
                return (
                    arr.map((item) => {
                        return <Tag key={item} >{item} </Tag>
                    })
                )
            }

        },
        {
            title: "文章类型",
            dataIndex: "type",
            key: "type",
            render: (_) => <Tag>{getOptNameType("blog_type", _)} </Tag>,
        },
        {
            title: "操作",
            width: "120px",
            render: (_, record) => (
                <div style={{ display: "flex" }}>
                    <RoleLink onClick={(e) => { navTo(record._id, "preview") }}>
                        预 览
                    </RoleLink>
                    <RoleLink role={getRole()} onClick={(e) => { navTo(record._id) }}>
                        编 辑
                    </RoleLink>
                    <Popconfirm title="您确认要删除吗？" onConfirm={(e) => { remove(record._id) }} okText="Yes" cancelText="No">
                        <RoleLink role={getRole()} danger>
                            删 除
                        </RoleLink>
                    </Popconfirm>
                </div>
            ),
        },
    ];
    const pageChange = (a, b) => {
        setCurrent(a)
        setPagesize(b)
    }
    return (
        <>
            <RoleButton role={getRole()} type='primary' style={{ marginBottom: 10 }} onClick={() => { navTo(-1) }}>
                再来一篇
            </RoleButton>

            <Spin spinning={loading}>
                <Table dataSource={dt} rowKey="_id" pagination={{ current: current, defaultCurrent: 1, showSizeChanger: true, pageSizeOptions: [10, 20, 50], onChange: pageChange }} columns={columns} />
            </Spin>
        </>
    );
}
